<template>
	<view>
		<navBar :text="'修改密码'"></navBar>

		<view class="title">
			<text>修改密码</text>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm"  label-width="150">
				<u-form-item label="旧密码" prop="oldPassword">
					<u-input trim placeholder="请输入旧密码" maxlength="15" type="password" v-model="forms.oldPassword" />
				</u-form-item>
				<u-form-item label="新密码" prop="newPassword">
					<u-input trim placeholder="请输入新密码" maxlength="15" type="password" v-model="forms.newPassword" />
				</u-form-item>
			</u-form>
		</view>

		<view class="deleteBtn">
			<u-button type="error" @click="changePassword">修改</u-button>
		</view>


		<view class="lose">
			<text @click="toForgetPassword">忘记密码?</text>
		</view>

		<!-- <u-modal v-model="show" :negative-top="transHeight" ref="yanzhenModal" show-cancel-button @confirm="yanzhen" :async-close="true">
			<view class="loseForm">
				<u-form :model="form" ref="uForm" label-width="100">
					<u-form-item label="邮箱" prop="qq_email">
						<u-input v-model="form.qq_email" maxlength="20" trim placeholder="请输入邮箱"/>
					</u-form-item>
					<u-form-item label="验证码" prop="captcha">
						<u-input v-model="form.captcha" maxlength="6" trim placeholder="请输入验证码"/>
						<u-button size="mini" @tap="getCode" type="primary">{{tips}}</u-button>
					</u-form-item>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
					</u-verification-code>
				</u-form>
			</view>
		</u-modal> -->

		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import {
		changeUserPassword,
		yanzhengEmail,
		getCaptcha,
		userLogout
	} from '../../utils/user.js'
	export default {
		data() {
			return {
				seconds: 60,
				user_id: '',
				forms: {
					oldPassword: '',
					newPassword: ''
				},
				show: false,
				form: {
					qq_email: '',
					captcha: ''
				},
				transHeight:'',
				tips: '',
				rules: {
					oldPassword: [
						// 对密码字段进行长度验证
						{
							min: 8,
							message: '密码不能少于8个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写旧密码',
							trigger: ['change', 'blur']
						},
					],
					newPassword: [
						// 对密码字段进行长度验证
						{
							min: 8,
							message: '密码不能少于8个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写新密码',
							trigger: ['change', 'blur']
						},
					],
				}
			};
		},
		methods: {
			//用户退出
			async userLogouted(){
				let result = await userLogout(this.user_id)
				if(result.code === 200){
					uni.removeStorageSync('token')
					uni.removeStorageSync('userInfo')
					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
						duration: 1000,
						isTab: true,
						url: '/pages/center/center'
					})
				}
			},
			//修改密码
			changePassword() {
				this.$refs.uForm.validate(async(valid) => {
					if(valid){
						let data = {
							user_id: this.user_id,
							pwd: this.forms.oldPassword,
							newpwd: this.forms.newPassword
						}
						let result = await changeUserPassword(data)
						if (result.code === 200) {
							this.userLogouted()					
						} else if (result.code === 505) {
							this.$refs.uToast.show({
								title: '旧密码错误',
								type: 'error',
								duration: 1000,
							})
						}else if(result.code === 515){
							this.$refs.uToast.show({
								title: '您的账号已被封禁，请联系开发者',
								type: 'error',
								duration: 1000,
							})
						}
					}
				})				
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			codeChange(text) {
				this.tips = text;
			},
			//显示验证框并向上移动
			YZmodal(){
				this.show = true
				uni.onKeyboardHeightChange(res => {
					this.transHeight = `${res.height}rpx`
				})
			},
			//跳转去忘记密码
			toForgetPassword() {
				uni.navigateTo({
					url:`/subpkg/forgetPassword/forgetPassword?type=1`
				})
			}
			// getCode() {
			// 	if (this.$refs.uCode.canGetCode) {
			// 		// 模拟向后端请求验证码
			// 		uni.showLoading({
			// 			title: '正在获取验证码'
			// 		})
			// 		setTimeout(async () => {												
			// 			let result = await getCaptcha(this.form.qq_email)
			// 			uni.hideLoading();						
			// 			if(result.code === 200){
			// 				// 这里此提示会被this.start()方法中的提示覆盖
			// 				this.$u.toast('验证码已发送');
			// 				// 通知验证码组件内部开始倒计时
			// 				this.$refs.uCode.start();
			// 			}else if(result.code === 515){
			// 				this.$refs.uToast.show({
			// 					title: '您的账号已被封禁，请联系开发者',
			// 					type: 'error',
			// 					duration: 1000
			// 				})
			// 			}else{
			// 				this.$refs.uToast.show({
			// 					title: '出现了不知名错误',
			// 					type: 'error',
			// 					duration: 1000
			// 				})
			// 			}
			// 		}, 500);
			// 	} else {
			// 		this.$u.toast('倒计时结束后再发送');
			// 	}
			// },
			//验证验证码是否正确
			// async yanzhen(){
			// 	let result = await yanzhengEmail(this.form.qq_email,this.form.captcha)
			// 	if(result.code === 200){
			// 		this.$refs.yanzhenModal.clearLoading();					
			// 		uni.navigateTo({
			// 			url:'/subpkg/password2/password2?type=1'
			// 		})
			// 		this.form.qq_email = this.form.captcha = ''
			// 		this.forms.newPassword = this.forms.oldPassword = ''
			// 	}else{
			// 		this.$refs.yanzhenModal.clearLoading();
			// 		this.$refs.uToast.show({
			// 			title: '验证码出错',
			// 			type: 'error',
			// 			duration: 1000,
			// 		})
			// 	}
			// }
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.user_id = uni.getStorageSync('userInfo').user_id
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding: 80rpx 0;
		font-size: 40rpx;
		font-weight: bold;
		color: #2979ff;
		display: flex;
		justify-content: center;
	}

	.form {
		width: 80%;
		margin: 0 auto;
	}

	.deleteBtn {
		padding-top: 150rpx;
		width: 30%;
		margin: 0 auto;
	}

	.lose {
		display: flex;
		justify-content: center;
		margin-top: 400rpx;
	}

	.loseForm {
		width: 90%;
		margin: 0 auto;
	}
</style>
